<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器——层次选择器</title>
    <script type="application/javascript" src="../../jquery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
        body{font-size:12px;text-align: center;}
        div,span { display: none;float: left; border: solid 1px #ccc;margin: 8px; }
        .clsA {width: 65px; height:65px;}
        .clsP {width: 45px; height: 45px;background-color: #eee}
        .clsC {width: 25px; height: 25px;background-color: #ddd}
    </style>
</head>
<body>
    <div class="clsA">Left</div>
    <div class="clsA" id="divMid">
        <span class="clsP" id="span1">
            <span class="clsC" id="span2"></span>
        </span>
    </div>
    <span class="clsA">Right_1</span>
    <div class="clsA">Right_2</div>
    <div class="clsA">Right_3</div>
</body>
<script type="application/javascript">
    // 层次选择器：通过元素之间的层次关系获取元素，主要包括后代、兄弟、相邻等
    /*匹配所有的后代元素*/
    $('#divMid').css('display','block'); // divMid
    $('div span').css('display','block'); // clsP clsC
    /*匹配所有的子元素*/
    $('#divMid').css('display','block');
    $('div>span').css('display','block'); // clsP
    /*匹配下一个元素（紧邻）*/
    $('#divMid +').css('display','block'); // Right_1
    $('#divMid').next().css('display','block'); // Right_1
    $('#divMid + span').css('display','block'); // Right_1
    /*匹配后面的所有元素*/
    $('#divMid ~').css('display','block'); // Right_1 Right_2 Right_3
    $('#divMid ~ div').css('display','block'); // Right_2 Right_3
    $('#divMid').nextAll().css('display','block'); // Right_1 Right_2 Right_3
    /*匹配所有的兄弟元素*/
    $('#divMid').siblings().css('display','block'); // Left Right_1 Right_2 Right_3
    $('#divMid').siblings('span').css('display','block'); // Right_1
    $('#divMid').siblings('div').css('display','block'); // Left Right_2 Right_3
</script>
</html>